<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>

    <script src="../static/js/vue.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/eui/index.js"></script>

    <script src="../static/js/App.js"></script>
    <script src="../static/js/auth.js"></script>
    <script src="../static/js/checkIsLogin.js"></script>
    <script src="../static/js/FormBoxComponent.js"></script>
    <script src="../static/js/DataListComponent.js"></script>

    <link rel="stylesheet" href="../static/css/template.css">
</head>
<body>
<div id="app">
    <!--引用form-box-comm组件-->
    <form-box-comm ref="myForm"
                   :box-title="boxTitle"
                   :add-api-url="url"
                   :edit-api-url="url"
                   :model="model"
                   :id-key="model.productId"
                   :on-validate="formValidateHandler"
                   :on-success="successHandler">

        <!--添加自己的元素-->
        <template>
            <div class="item">
                <label for="productName">商品名称：</label>
                <input id="productName" v-model="model.productName">
            </div>

            <div class="item">
                <label for="num">库存量：</label>
                <input id="num" v-model="model.num">
            </div>

            <div class="item">
                <label for="price">市场价：</label>
                <input id="price" v-model="model.price">
            </div>
        </template>
        <!--添加自己的元素 结束-->
    </form-box-comm>

    <!--引用data-list-comm组件-->
    <data-list-comm ref="myList"
                    :list-api-url="url"
                    :delete-api-url="url"
                    :model-attr="modelAttr"
                    row-id-key="productId"
                    :on-add-new-form="onAddNewFormHandler"
                    :on-edit-form="onEditFormHandler"
                    is-page="true"></data-list-comm>
</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '新增商品',
            url: global_api_url + "productTable",
            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            //对象
            model: {
                productId: null,
                productName: null,
                num: 0,
                price: 0.00
            },

            //列表的表单头，支持的定义格式如下：
            modelAttr: [
                {
                    display: '商品编号',
                    attribute: 'productId'
                },
                {
                    display: '商品名称',
                    attribute: 'productName'
                },
                {
                    display: '库存量',
                    attribute: 'num'
                },
                {
                    display: '市场价',
                    attribute: 'price'
                }
            ]
        },
        created() {

        },
        methods: {
            /**
             * 挂载表单保存数据前，验证方法
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                //console.log(model);
                if (model.productName == null || model.productName == "") {
                    alert("商品名称必须输入！");
                    return false;
                } else if (model.price == null || model.price == "") {
                    alert("市场价必须输入！");
                    return false;

                } else {
                    return true;
                }
            },

            /**
             * 数据保存成功后执行
             */
            successHandler(data) {
                //console.log(data);
                this.$refs.myList.getModelList();
                this.$refs.myForm.closeForm();
            },

            /**
             * 挂载新建表单方法
             */
            onAddNewFormHandler() {
                //恢复原样
                this.model = {};
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = '新增商品';
            },

            /**
             * 挂载获得编辑表单方法
             */
            onEditFormHandler(item) {
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = `正在修改[${item.productName}]`;
                //赋值
                this.model = item;
            },
        }
    });
</script>
</body>
</html>